<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>canvas</title>
	</head>

	<body>
		<canvas id="one" width="500" height="500" onmousedown="down(event)" onmouseup="up()" onmousemove="draw(event)" style="border: 3px solid #000;"></canvas>
	</body>

	<script type="text/javascript">
		var oc = document.getElementById('one');
		var cxt = oc.getContext('2d');
		var t = false;
		var ox;
		var oy;

		function down(e) {
			t = true;
			ox = e.clientX;
			oy = e.clientY;
		}

		function up() {
			t = false;
		}

		function draw(e) {
			if(t) {
				var x = e.clientX;
				var y = e.clientY;
				//cxt.fillStyle = "#000";
				//cxt.beginPath();
				//cxt.arc(x, y, 10, 0, Math.PI * 2, true);
				//cxt.closePath();
				//cxt.fill();
				cxt.moveTo(ox, oy);
				cxt.lineTo(x, y);
				cxt.stroke();
				ox = x;
				oy = y;
			}
		}
	</script>

</html>